import React, { Component } from 'react'
import { connect } from 'react-redux'
import { registerUser } from '../App/actions';


class Register extends Component {

  constructor() {
    super(...arguments)
    this.handleSubmit = this.handleSubmit.bind(this) 
  }

  handleSubmit (event) {
    event.preventDefault();
    const username = this.refs.username;
    const email = this.refs.email;
    const password = this.refs.password;
    this.props.onRegisterUser(username.value, email.value, password.value);
    email.value = '';
  }


  render() {

    return (
      <div>

          <div className = 'row'>
            <div className="col-lg-12">
              <div className = 'page-header'>
                <h3>Container: Register</h3>
              </div>
            </div>
          </div>
          
          <div className = 'row'>
            <div className = 'col-lg-6'>
              <div className = 'well'>
                
                <form className="form-horizontal" onSubmit={this.handleSubmit}>
                  
                  <fieldset>
                    <div className="form-group">
                      <label for="username" className="col-lg-2 control-label">Username</label>
                      <div className="col-lg-10">
                        <input type="text" ref="username" placeholder="Enter a username" className="form-control"/>
                      </div>
                    </div>
                    
                    <div className="form-group">
                      <label for="email" className="col-lg-2 control-label">Email</label>
                      <div className="col-lg-10">
                        <input type="text" ref="email" placeholder="Enter a email" className="form-control"/>
                      </div>
                    </div>
                    
                    <div className="form-group">
                      <label for="password" className="col-lg-2 control-label">Password</label>
                      <div className="col-lg-10">
                        <input type="password" ref="password" placeholder="Enter a password" className="form-control"/>
                      </div>
                    </div>

                    <div className="form-group">
                      <div className="col-lg-10 col-lg-offset-2">
                        <button className="btn btn-success" onClick={this.handleSubmit}><i className="fa fa-sign-in"/>{' '}Register Now </button>
                      </div>
                    </div>                 


                  </fieldset>
                </form>

              </div>
            </div>
          </div>

      </div>

      
    )
  }
}

function mapStateToProps(state, ownProps) {

  return {}
}

function mapDispatchToProps(dispatch) {
  return {
    onRegisterUser: (username, email, password) => dispatch( registerUser(username, email, password) ),
    dispatch,
  };
}

// ES6 export does not work with Webpack Chunk Splitting.
// export default connect(mapStateToProps, mapDispatchToProps)(Register)
module.exports = connect(mapStateToProps, mapDispatchToProps)(Register)